<template>
    <div :class="[{ 'style-ui': showStyle }, 'app-box']">
        <template v-if="showPage">
            <el-container>
                <el-aside id="left-aside">
                    <pub-left />
                </el-aside>

                <el-main id="app-main">
                    <pub-header />
                    <div class="main-box clearfix">
                        <el-config-provider :locale="locale">
                            <router-view v-slot="{ Component }" :key="$route.fullPath">
                                <keep-alive :include="includeList">
                                    <component :is="Component"></component>
                                </keep-alive>
                            </router-view>
                        </el-config-provider>
                    </div>
                    <pub-footer company="蚂蚁雄兵技术支持"></pub-footer>
                </el-main>
            </el-container>
        </template>

        <template v-else>
            <el-config-provider :locale="locale">
                <router-view v-slot="{ Component }">
                    <keep-alive :include="includeList">
                        <component :is="Component"></component>
                    </keep-alive>
                </router-view>
            </el-config-provider>
        </template>
    </div>
</template>

<script setup>
import { ref, computed, onMounted, watch, onBeforeUnmount } from "vue"
import { useRoute } from "vue-router"
import { useBaseStore } from "@store/base"
// import zhCn from "element-plus/lib/locale/lang/zh-cn"
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
import PubFooter from "@components/PubFooter.vue"
import PubHeader from "@components/PubHeader.vue"
import PubLeft from "@components/PubLeft.vue"

import EventBus from "@common/event-bus" // EventBus事件总线，任意组件通信

const locale = ref(null)
locale.value = zhCn

const storeBase = useBaseStore()
const showStyle = computed(() => {
    return storeBase.showStyle
})

const includeList = computed(() => {
    return storeBase.includeList
})


onMounted(() => {
   
})

onBeforeUnmount(() => {
    EventBus.all.clear()
})

const route = useRoute()
const showPage = ref(false)
watch(
    () => route.path,
    (val) => {
        EventBus.emit("route_paths", val)
        if (val === "/") {
            showPage.value = false
        } else {
            showPage.value = true
        }
    },
    {
        immediate: true,
    }
)

</script>

<style lang="less">
@import (once) "@assets/css/common.less";

.app-box {
    width: 100%;
    height: 100%;
}
#left-aside {
    width: 240px !important;
    transition: all 0.2s;
    position: fixed;
    left: 0;
    top: 0;
    height: 100%;
    z-index: 11;
    overflow: hidden;
}

#app-main {
    padding: 0;
    width: auto;
    margin-left: 240px;
    min-width: 950px;
    overflow-x: hidden;
    padding-bottom: 60px;
}

.el-container {
    width: 100%;
    min-height: 100vh;
    position: relative;
}

.main-box {
    padding: @padding-sm @padding-sm 0;
    min-height: 500px;
    background: #f6f6f6;
}
</style>
